<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Engines home</title>
</head>
<body>

<wicket:extend>
	
	<script language="Javascript" type="text/javascript">


	function checkOperation(msg) {
		return confirm(msg);
	}

	function deleteEngine(engineId) {
		$('#' + engineId).remove();
	}
	
    $(function(){
    	var url = $("#url"),allFields = $( [] ).add( url ),tips = $( ".validateTips" );

    	function updateTips( t ) {
			tips.text(t).addClass( "ui-state-highlight" ); 
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

    	function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}
		
		
		// Dialog			
		$('#dialog').dialog({
			autoOpen: false,
			width: 600,
			buttons: {
				"Ok": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );
					bValid = bValid && checkLength( url, "url", 1, 160 );
					if(bValid) {
						$('#engineForm').submit(); 
						$(this).dialog("close"); 
					}
				}, 
				"Cancel": function() {
					allFields.val( "" ).removeClass( "ui-state-error" );
					$(this).dialog("close"); 
				} 
			}
		});
		// Dialog Link
		$('#dialog_link').click(function() {
			$('#dialog').dialog('open');
			return false;
		});

		// Dialog Link
		$('#save_link').click(function() {
			console.log(" call back url :" + callBackURL);
			alert(" call back url :"+ callBackURL);
		});
		
	});
    </script>
    
	<style> 
		#save_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
		#save_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		#error{margin-bottom: 20px;border: 1px solid #efefef;} 
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } 
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style> 
	
    <h1>Engines</h1>
	<span wicket:id="message">Message goes here</span>
	
	<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
	<!-- h2 class="demoHeaders">Dialog</h2-->
	<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Add Search Engine</a></p>
		
	<div id="dialog" title="Create search engine">
		<p class="validateTips">All form fields are required.</p>
		<form wicket:id="engineForm">
    		<fieldset>
    			<label for="url">Url</label>
    			<input type="text" wicket:id="url" id="url" class="nospam text ui-widget-content ui-corner-all" />
    			<label for="lang">Languages</label>
    			<input type="text" wicket:id="lang" id="lang" class="nospam text ui-widget-content ui-corner-all" />
    		</fieldset>
  		</form>
  	</div>
  
  <div id="users-contain" class="ui-widget">
	<h1>Existing Engines:</h1> 
	<table wicket:id="theContainer" id="users" class="ui-widget ui-widget-content"> 
		<thead> 
			<tr class="ui-widget-header "> 
				<th>Priority</th> 
				<th>Service url</th> 
				<th>Supported langs</th>
				<th>Operation</th>
			</tr> 
		</thead> 
		<tbody>
			<tr wicket:id="engines"> 
				<td wicket:id="priority">John Doe</td> 
				<td wicket:id="url">john.doe@example.com</td>
				<td wicket:id="lang">es</td>
				<td>
					<span wicket:id="delete">delete</span>
				</td>
			</tr> 
		</tbody> 
	</table> 
   </div>
   

	<p>
		<a href="#" id="save_link" class="ui-state-default ui-corner-all">
			<span class="ui-icon ui-icon-newwin"></span>Save</a>
	</p> 

  <wicket:remove>
    <p>
        1/2/2004<br/>
        More comment text here.
    </p>
  </wicket:remove>
	
	
	
</wicket:extend>

</body>
</html>